<template>
  <view class="contrastVue">
    <image :src="uploadVideoUrl + '?x-oss-process=video/snapshot,t_1,f_jpg,w_340,m_fast,ar_auto'" mode="widthFix" class="caseImg"></image>
    <image class="quit absolute" src="../../static/close.png" @click="quit()" :style="{top: menuButtonTop + 'px',width: menuButtonHeight + 'px',height: menuButtonHeight + 'px'}"></image>
    <view class="videoVue flex-between" v-if="height > 0">
		<view class="video relative element">
			<video :src="uploadVideoUrl" controls :show-fullscreen-btn="false" :style="{ height: height + 'rpx' }"></video>
			<view class="name">原视频</view>
		</view>
		<view class="video relative">
			<video :src="videoUrl" :style="{ height: height + 'rpx' }" controls :show-fullscreen-btn="false"></video>
			<view class="name">AI视频</view>
		</view>
    </view>

    <view class="botVue text-center">
		<image src="../../static/case/banner.png" mode="widthFix"></image>
    </view>
  </view>
</template>

<script>
export default {
	onShareAppMessage() {
		return {
			title: "小昭数字人", // 分享的标题
			path: `/pages/mine/contrast?videoUrl=${encodeURIComponent(this.videoUrl)}&uploadVideoUrl=${encodeURIComponent(this.uploadVideoUrl)}`,
			imageUrl: 'https://aiet-file-center.oss-cn-hangzhou.aliyuncs.com/shuziren/image/211014382643522.png', // 分享的图片URL
			success(res) {
				console.log("分享成功", res);
			},
			fail(err) {
				console.error("分享失败", err);
			},
		};
	},
	onShareTimeline() {
		return {
			title: "坏香蕉数字人", // 分享的标题
			query: `videoUrl=${encodeURIComponent(this.videoUrl)}&uploadVideoUrl=${encodeURIComponent(this.uploadVideoUrl)}`, // 分享的路径参数
			imageUrl: "https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/Frame%202522%402x.png", // 分享的图片URL
			success(res) {
				console.log("分享成功", res);
			},
			fail(err) {
				console.error("分享失败", err);
			},
		};
	},
	data() {
		return {
			videoUrl: "",
			uploadVideoUrl: "",
			menuButtonTop: 0,
			menuButtonHeight: 0,
			isPlay1: false,
			isPlay2: false,
			videoContext1: null,
			videoContext2: null,
			height: 0,
		};
	},
	onLoad(option) {
		this.videoUrl = decodeURIComponent(option.videoUrl);
		this.uploadVideoUrl = decodeURIComponent(option.uploadVideoUrl);
		uni.showLoading();
		let _this = this;
		setTimeout(() => {
			uni.createSelectorQuery().select(".caseImg").boundingClientRect(function (rect) {
				console.log("元素高度：", rect.height);
				_this.height = _this.$utils.pxTorpx(rect.height);
				uni.hideLoading();
			}).exec();
		}, 1200);
	},
	mounted() {
		let _this = this;
		wx.getSystemInfo({
			success(res) {
			// 获取胶囊信息
				let menuButtonObject = wx.getMenuButtonBoundingClientRect();
				_this.menuButtonTop = menuButtonObject.top; //胶囊距离顶部距离
				_this.menuButtonHeight = menuButtonObject.height; //胶囊距离顶部距离
				console.log(_this.menuButtonTop, _this.menuButtonHeight);
			},
		});
	},
	methods: {
		quit() {
			this.videoUrl = "";
			this.uploadVideoUrl = "";
			const pages = getCurrentPages();
			if (pages.length === 1) {
			// 当前页面是初始页面，无法返回
				console.log("当前页面是初始页面，无法返回");
				wx.switchTab({
				  url: "/pages/index/index", // 跳转到首页或其他页面
				  success: (res) => {
					console.log("跳转到首页成功");
				  },
				  fail: (err) => {
					console.error("跳转到首页失败", err);
				  },
				});
			} else {
			// 可以返回上一级页面
				wx.navigateBack({
					delta: 1, // 返回上一级页面
					success: (res) => {
						console.log("返回上一级页面成功");
					},
					fail: (err) => {
						console.error("返回上一级页面失败", err);
					},
				});
			}
		},
	},
};
</script>

<style lang="less" scoped>
.quit {
  left: 30rpx;
  z-index: 999;
  background: #fff;
  border-radius: 50%;
}
.caseImg {
  width: 340rpx;
  position: fixed;
  left: -1000rpx;
}

.contrastVue {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: #FFA0A0;
  .botVue {
    width: 100%;
    height: 640rpx;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .videoVue {
    width: 690rpx;
    position: absolute;
    left: 30rpx;
    bottom: 640rpx;
    .video {
      width: 340rpx;
      min-height: 500rpx;
      text-align: center;
      image,
      video {
        width: 340rpx;
        border-radius: 12rpx 12rpx 0 0;
        box-sizing: border-box;
        line-height: 1;
        display: block;
      }
      .name {
        width: 100%;
        height: 88rpx;
        text-align: center;
        background: rgba(0, 0, 0, 0.2);
        line-height: 88rpx;
        color: #333;
        font-weight: 600;
        font-size: 32rpx;
        border-radius: 0 0 12rpx 12rpx;
        font-family: myfont;
      }
    }
  }
}
</style>
